<template>
  <div class="minstate-panel">
    <div class="wrap" @mouseenter="mouseenter" @mouseleave="mouseleave">
      <div
        v-show="showMinWin"
        class="min-img"
        :style="{'left': (index * 20 - 65) + 'px'}"
      >
        <img :src="iconInfo.minImg" height="110" width="170" class="img" @click="restoreNormalWin(iconInfo.wid)" />
        <el-icon class="close" :size="16" color="#409eff" @click="closeWin(iconInfo.wid)" ><Close /></el-icon>
      </div>
      <el-image
        class="icon"
        :src="iconInfo.imgUrl"
        style="width: 22px; height: 22px; padding: 6px 9px"
        @click="minIconClick(iconInfo.wid)"
      />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { PropType } from 'vue'
import { Close } from '@element-plus/icons-vue'
import { IWinConfig } from '@/components/win-content'
import { useWindowStore } from '@/store/window'
import { useCloseWin } from '@/hooks/use-close-win'

defineProps({
  iconInfo: {
    type: Object as PropType<IWinConfig>,
    required: true
  },
  index: {
    type: Number,
    default: 0
  }
})

const windowStore = useWindowStore()
const showMinWin = ref(false)

// 鼠标移入移出显示/隐藏缩略图
const mouseenter = () => { setTimeout(() => showMinWin.value = true, 300) }
const mouseleave = () => { setTimeout(() => showMinWin.value = false, 300) }

const closeWin = (wid: number) => { useCloseWin(wid) }

// 点击缩略图展示回正常状态
const restoreNormalWin = (wid: number, idx?: number) => {
  let index = idx ?? windowStore.winConfigs.findIndex((item) => item.wid === wid)
  windowStore.winConfigs[index].isShow = true
  windowStore.winIndex += 1
  windowStore.winConfigs[index].zIndex = windowStore.winIndex
  windowStore.currentActiveId = wid
}

// nav-bottom图标点击
const minIconClick =(wid: number) => {
  const index = windowStore.winConfigs.findIndex(item => item.wid === wid)
  // 如果窗口的zIndex等于winStore里面存储的，那么说明它在顶层，此时它隐藏
  if (windowStore.winConfigs[index].zIndex === windowStore.winIndex && windowStore.winConfigs[index].isShow) {
    windowStore.winConfigs[index].isShow = false
    // 隐藏后，切换currentActiveId
    windowStore.winConfigs[index].zIndex = 0
    let activeId = -1
    let maxZIndex = -1
    windowStore.winConfigs.forEach(item => {
      if (maxZIndex < item.zIndex) {
        maxZIndex = item.zIndex
        activeId = item.wid
      }
    })
    windowStore.currentActiveId = activeId
  } else { //显示着但zIndex不在顶层或是最小化时，此时置顶
    restoreNormalWin(wid, index) // 复用点击缩略图函数
  }
}

</script>

<style lang="less" scoped>
.minstate-panel {
  position: relative;
  .min-img {
    position: absolute;
    left: 0px;
    top: -130px;
    width: 180px;
    height: 120px;
    padding: 5px;
    background: rgba(255, 255, 255, .3);
    backdrop-filter: 15px;
    // display: none;
    border-radius: 5px;
    cursor: pointer;
    z-index: 99;
    box-shadow: 0px 1px 2px -2px rgba(32, 32, 32, 0.16),0px 3px 6px 0px rgba(32, 32, 32, 0.19),0px 5px 12px 4px rgba(32, 32, 32, 0.09);
    transition: all .4s ease-in-out;
  }
  .img {
    position: relative;
    left: 5px;
    top: 5px;
    object-fit: fill;
    transition: all .4s ease-in-out;
  }

  .close {
    cursor: pointer;
    position: absolute;
    top: -3px;
    left: 175px;
    background: rgba(255, 255, 255, .6);
    border-radius: 50%;
    padding: 2px;
    transition: all .4s ease-in-out;
    box-shadow: 0px 1px 2px -2px rgba(32, 32, 32, 0.16),0px 3px 6px 0px rgba(32, 32, 32, 0.19),0px 5px 12px 4px rgba(32, 32, 32, 0.09);

    &:hover {
      background: #409eff;
      color: #fff;
      transition: all .4s ease-in-out;
    }
  }
}
</style>
